<template>
  <div class="app-container">
    <!-- 搜索筛选操作栏 -->
    <div class="filter-container clearfix">
      <el-time-picker
        v-model="dateInput"
        is-range
        class="filter-item"
        :clearable="false"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="max-width: 100%;"
        @change="dateInputHandle"
        format="HH:mm"
        arrow-control
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 10px;"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        icon="iconfont qt-caozuo-xunhuan1"
        @click="clearFilter"
      >
        重置
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="拍卖场名称" prop="name" align="center" />
      <el-table-column label="开始时间-结束时间" align="center">
        <template slot-scope="{ row }">
          {{ row.start_time }}-{{ row.end_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍品数量" prop="product_num" />
      <el-table-column align="center" label="预约人数" prop="person_num" />
      <el-table-column align="center" label="出价次数" prop="offer_num" />
      <el-table-column align="center" label="成交数" prop="deal_num" />
      <el-table-column align="center" label="成交数金额" prop="deal_price" />
      <el-table-column align="center" label="平台服务费" prop="service_price" />
    </el-table>
  </div>
</template>

<script>
import { getAuctioningPreview } from "@/api/common";
import waves from "@/directive/waves"; // waves directive

export default {
  name: "auctioningPreview",
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      dateInput: undefined,
      listQuery: {
        start_time: undefined,
        end_time: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取时间
    dateInputHandle(e) {
      if (e && e.length > 0) {
        this.listQuery.start_time =
          new Date(e[0]).getHours() + ":" + new Date(e[0]).getMinutes();
        this.listQuery.end_time =
          new Date(e[1]).getHours() + ":" + new Date(e[1]).getMinutes();
      }
    },
    handleFilter() {
      this.getList();
    },
    clearFilter() {
      this.listQuery["start_time"] = undefined;
      this.listQuery["end_time"] = undefined;
      this.dateInput = undefined;
      this.handleFilter();
    },
    getList() {
      this.listLoading = true;
      getAuctioningPreview(this.listQuery)
        .then(response => {
          this.list = response.data;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>
